<div
    bsModal
    #createOrEditModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="createOrEditModal"
    aria-hidden="true"
    [config]="{ backdrop: 'static', keyboard: !saving }"
>
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">
            <form
                *ngIf="active"
                #editForm="ngForm"
                novalidate
                (ngSubmit)="save()"
            >
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span *ngIf="parkingsBillingSchemeEdit.id">编辑计费方案:
                            {{ parkingsBillingSchemeEdit.planName }}</span>
                        <span *ngIf="!parkingsBillingSchemeEdit.id"
                            >新增计费方案</span>
                    </h4>
                    <button
                        type="button"
                        class="close"
                        (click)="close()"
                        [attr.aria-label]="l('Close')"
                        [disabled]="saving"
                    >
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="m-portlet m-portlet--creative m-portlet--bordered-semi">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">                                    
                                    <h4 class="m-portlet__head-label m-portlet__head-label--accent">
                                        <span>名称/备注</span>
                                    </h4>
                                </div>			
                            </div>
                        </div>
                        <div class="m-portlet__body row">
                            <div class="col-md-6" style="text-align: center">
                                <div class="form-group">
                                    <label for="planName">计费方案名称</label>
                                    <input
                                        type="text"
                                        name="planName"
                                        class="form-control"
                                        [(ngModel)]="parkingsBillingSchemeEdit.planName"
                                    />
                                </div>
                            </div>
                            <div class="col-md-6" style="text-align: center">
                                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                    <label>备注<span class="text-danger">*</span></label>
                                    <input
                                        class="form-control"
                                        name="remark"
                                        type="text"
                                        min="0"
                                        [ngClass]="{edited: parkingsBillingSchemeEdit.remark}"
                                        [(ngModel)]="parkingsBillingSchemeEdit.remark"
                                        required
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet m-portlet--creative m-portlet--bordered-semi">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">                                    
                                    <h2 class="m-portlet__head-label m-portlet__head-label--accent">
                                        <span>出售方案</span>
                                    </h2>
                                </div>			
                            </div>
                        </div>
                        <div class="m-portlet__body row">
                            <div class="col-md-3" style="text-align: center">
                                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                    <label>出售价格/元
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input
                                        class="form-control"
                                        name="sellingPrice"
                                        type="number"
                                        min="0"
                                        [ngClass]="{edited: parkingsBillingSchemeEdit.sellingPrice}"
                                        [(ngModel)]="parkingsBillingSchemeEdit.sellingPrice"
                                        required
                                    />
                                </div>
                            </div>
                            <div class="col-md-3" style="text-align: center">
                                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                    <label>年限</label>
                                    <input
                                        class="form-control"
                                        value="50"
                                        disabled="disabled"
                                    />
                                </div>
                            </div>                            
                        </div>
                    </div>
                    <div class="m-portlet m-portlet--creative m-portlet--bordered-semi">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">                                    
                                    <h2 class="m-portlet__head-label m-portlet__head-label--accent">
                                        <span>月租方案</span>
                                    </h2>
                                </div>			
                            </div>
                        </div>
                        <div class="m-portlet__body row">
                            <div class="col-md-3" style="text-align: center">
                                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                    <label>月付价格/元<span class="text-danger">*</span></label>
                                    <input
                                        class="form-control"
                                        name="monthlyRentPrice"
                                        type="number"
                                        min="0"
                                        [ngClass]="{edited: parkingsBillingSchemeEdit.monthlyRentPrice}"
                                        [(ngModel)]="parkingsBillingSchemeEdit.monthlyRentPrice"
                                        required
                                    />
                                </div>
                            </div>
                            <div class="col-md-3" style="text-align: center">
                                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                    <label>季付价格/<span class="text-danger">*</span></label>
                                    <input
                                        class="form-control"
                                        name="quarterlyPrice"
                                        type="number"
                                        min="0"
                                        [ngClass]="{edited: parkingsBillingSchemeEdit.quarterlyPrice}"
                                        [(ngModel)]="parkingsBillingSchemeEdit.quarterlyPrice"
                                        required
                                    />
                                </div>
                            </div>
                            <div class="col-md-3" style="text-align: center">
                                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                    <label>半年价格/元<span class="text-danger">*</span></label>
                                    <input
                                        class="form-control"
                                        name="halfYearPrice"
                                        type="number"
                                        min="0"
                                        [ngClass]="{edited: parkingsBillingSchemeEdit.halfYearPrice}"
                                        [(ngModel)]="parkingsBillingSchemeEdit.halfYearPrice"
                                        required
                                    />
                                </div>
                            </div>
                            <div class="col-md-3" style="text-align: center">
                                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                    <label>年付价格/元<span class="text-danger">*</span></label>
                                    <input
                                        class="form-control"
                                        name="yearPrice"
                                        type="number"
                                        min="0"
                                        [ngClass]="{edited: parkingsBillingSchemeEdit.yearPrice}"
                                        [(ngModel)]="parkingsBillingSchemeEdit.yearPrice"
                                        required
                                    />
                                </div>
                            </div>                           
                        </div>
                    </div>
                    <div class="m-portlet m-portlet--creative m-portlet--bordered-semi">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">                                    
                                    <h2 class="m-portlet__head-label m-portlet__head-label--accent">
                                        <span>临时方案</span>
                                    </h2>
                                </div>			
                            </div>
                        </div>
                        <div class="m-portlet__body row">
                            <div class="col-md-3">
                                <div class="col-md-12" style="text-align: center">
                                    <div class="form-group">
                                        <label>收费类型<span class="text-danger">*</span></label>
                                        <div>
                                            <!-- <p-dropdown
                                                [options]="chargeTypeOption"
                                                [(ngModel)]="selectedChargeType"                                     
                                                placeholder="选择收费类型"
                                                optionLabel="label"          
                                                [ngModelOptions]="{ standalone: true }"
                                            ></p-dropdown> -->
                                            <select class="form-control" 
                                                name="chargeType"
                                                [(ngModel)]="parkingsBillingSchemeEdit.chargeType">
                                                <option selected>选择收费类型</option>
                                                <option *ngFor="let chargeType of chargeTypeOption" 
                                                    [value]="chargeType.value">{{chargeType.label}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12" style="text-align: center">
                                    <div class="form-group">
                                        <label for="isOpen">临时车是否开闸</label>        
                                        <div>
                                            <p-inputSwitch
                                                [(ngModel)]="parkingsBillingSchemeEdit.isOpen"
                                                [ngModelOptions]="{ standalone: true }"
                                            ></p-inputSwitch>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-4" style="text-align: center">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>免费时长/分钟<span class="text-danger">*</span></label>
                                            <input
                                                class="form-control"
                                                name="freeTime"
                                                type="number"
                                                min="0"
                                                [ngClass]="{edited: parkingsBillingSchemeEdit.freeTime}"
                                                [(ngModel)]="parkingsBillingSchemeEdit.freeTime"
                                                required
                                            />
                                        </div>
                                    </div>
                                    <div class="col-md-4" *ngIf="parkingsBillingSchemeEdit.chargeType==1" style="text-align: center">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label title="提前交费后在此时间段内离场不另收费">冗余时长/分钟<span class="text-danger">*</span></label>
                                            <input
                                                class="form-control"
                                                name="endFreeTime"
                                                type="number"
                                                min="0"
                                                [(ngModel)]="parkingsBillingSchemeEdit.endFreeTime"
                                                required
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div class="row">                                    
                                    <div class="col-md-4" *ngIf="parkingsBillingSchemeEdit.chargeType==1" style="text-align: center">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>计费单价/元<span class="text-danger">*</span></label>
                                            <input
                                                class="form-control"
                                                name="Univalent"
                                                type="number"
                                                min="0"
                                                [ngClass]="{edited: parkingsBillingSchemeEdit.univalent}"
                                                [(ngModel)]="parkingsBillingSchemeEdit.univalent"
                                                required
                                            />
                                        </div>
                                    </div>
                                    <div class="col-md-4" *ngIf="parkingsBillingSchemeEdit.chargeType==1" style="text-align: center">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>间隔时长/分钟<span class="text-danger">*</span></label>
                                            <input
                                                class="form-control"
                                                name="intervalTime"
                                                type="number"
                                                min="0"
                                                [ngClass]="{edited: parkingsBillingSchemeEdit.intervalTime}"
                                                [(ngModel)]="parkingsBillingSchemeEdit.intervalTime"
                                                required
                                            />
                                        </div>
                                    </div>
                                    <div class="col-md-4" *ngIf="parkingsBillingSchemeEdit.chargeType==1" style="text-align: center">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>封顶价格/元<span class="text-danger">*</span></label>
                                            <input
                                                class="form-control"
                                                name="intervalTime"
                                                type="number"
                                                min="0"
                                                [ngClass]="{edited: parkingsBillingSchemeEdit.cappedPrice}"
                                                [(ngModel)]="parkingsBillingSchemeEdit.cappedPrice"
                                                required
                                            />
                                        </div>
                                    </div>
                                    <div class="col-md-4" *ngIf="parkingsBillingSchemeEdit.chargeType==0" style="text-align: center">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>次付价格/元<span class="text-danger">*</span></label>
                                            <input
                                                class="form-control"
                                                name="onePrice"
                                                type="number"
                                                min="0"
                                                [ngClass]="{edited: parkingsBillingSchemeEdit.onePrice}"
                                                [(ngModel)]="parkingsBillingSchemeEdit.onePrice"
                                                required
                                            />
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button
                        [disabled]="saving"
                        type="button"
                        class="btn btn-default"
                        (click)="close()"
                    >
                        取消
                    </button>
                    <button
                        type="submit"
                        class="btn btn-primary"
                        [disabled]="!editForm.form.valid"
                        [buttonBusy]="saving"
                        [busyText]="l('SavingWithThreeDot')"
                    >
                        <i class="fa fa-save"></i>
                        <span>保存</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
